<template>
  <div id="personalCenter">
    <div class="bank">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>钱包账户</h4>
      </div>
      <div v-loading="loading"
    element-loading-text="拼命加载中"  element-loading-spinner="el-icon-loading" class="bank-add">
        <ul v-if="show">
          <li>
            <p>OTC钱包</p>
            <p>{{Number(list[0].available)+Number(list[0].freeze)}} USDT</p>
          </li>
          <li>
            <p>秒合约钱包</p>
            <p>{{list[1].balance}} USDT</p>
          </li>
          <li>
            <p>合约钱包</p>
            <p>{{Number(list[2].availableAmount)+Number(list[2].freezeAmount)}} USDT</p>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="$route.query.id==1?false:true" class="c-transferaccount">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>转账</h4>
      </div>
      <p class="c-t">请仔细核对转账钱包金额</p>
      <div class="c-transfer">
        <ul>
          <li>
            <el-input disabled placeholder="OTC钱包"></el-input>
          </li>
          <li>
            <img src="../../assets/img/zhixiang.png" alt />
          </li>
          <li>
            <el-select v-model="listType" placeholder="请选择">
              <el-option v-for="(v,i) in list.slice(1,3)" :key="i" :label="v.type" :value="v.type"></el-option>
            </el-select>
          </li>
        </ul>
        <p style="margin:10px 0;font-size:14px;color:#a1b1b0">转账金额</p>
        <el-input
          oninput="value=value.replace(/[^\d.]/g,'')"
          v-model="amount"
          style="width:300px;margin-bottom:20px"
          size="small"
          placeholder="请输入划转金额"
        ></el-input>
        <br />
        <el-button
          @click.native="transfer"
          style="width:300px;margin-bottom:20px"
          size="small"
          type="warning"
          :loading="load"
        >立即转账</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  userWalletList,
  SwalletTransfer,
  CwalletTransfer
} from "../../api/api";
import { mapState } from "vuex";
import qs from "qs";
export default {
  name: "personalCenter",
  data() {
    return {
      list: [],
      listType: "秒合约钱包",
      show: false,
      amount: "",
      load:false,
      loading:false
    };
  },
  computed: {
    ...mapState(["token"])
  },
  created() {
    // console.log(this.$route.query);
    this.getWallet();
  },
  methods: {
    getWallet() {
      this.loading = true
      var params = {
        token: this.token
      };
      userWalletList(params).then(res => {
        this.list = res.data.data;
        this.show = true;
        this.loading = false
      });
    },
    //划转
    transfer() {
      if (this.amount == "") {
        this.$notify({
          title: "警告",
          message: "划转金额不能为空!",
          type: "warning"
        });
        return false;
      }
      // console.log(this.listType);
      this.load = false
      var params = {
          token: this.token,
          amount: this.amount
        };
      if (this.listType == "秒合约钱包") {
        this.load = true;
        SwalletTransfer(qs.stringify(params)).then(res => {
          this.load = false;
          if (res.data.code == 200) {
            this.getWallet();
            this.$notify({
              title: "提示",
              message: "划转成功！",
              type: "success"
            });
          } else {
            this.$notify({
              title: "警告",
              message: res.data.msg,
              type: "warning"
            });
          }
        });
      }else{
        this.load = true;
        CwalletTransfer(qs.stringify(params)).then(res => {
          this.load = false;
          if (res.data.code == 200) {
            this.getWallet();
            this.$notify({
              title: "提示",
              message: "划转成功！",
              type: "success"
            });
          } else {
            this.$notify({
              title: "警告",
              message: res.data.msg,
              type: "warning"
            });
          }
        });
      }
    }
  }
};
</script>
<style lang='less' scope>
// ----------------------
#personalCenter {
  .title {
    position: relative;
    background-color: #fff;
    padding: 10px 0;
    > img {
      position: absolute;
      top: 4px;
    }
    > h4 {
      margin-left: 50px;
    }
  }
  .bank {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff;
    .bank-add {
      padding: 10px;
      > ul {
        display: flex;
        li {
          margin-right: 50px;
          text-align: center;
          display: inline-block;
          width: 200px;
          padding: 10px 0;
          > p:nth-child(1) {
            font-size: 14px;
            margin-bottom: 10px;
            color: #a1b1b0;
          }
        }
        li:nth-child(1) {
          background-color: #fffaf4;
          > p:nth-child(2) {
            color: #ff8f4e;
          }
        }
        li:nth-child(2) {
          background-color: #f3faff;
          > p:nth-child(2) {
            color: #557fb7;
          }
        }
        li:nth-child(3) {
          background-color: #f3fffd;
          > p:nth-child(2) {
            color: #0b9288;
          }
        }
      }
    }
  }

  .c-transferaccount {
    padding: 10px;
    background-color: #fff;
    .c-t {
      color: #a1b1b0;
      font-size: 14px;
      margin: 10px 0 10px 50px;
    }
  }
  .c-transfer {
    margin-left: 50px;
    margin-top: 20px;
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > li:nth-of-type(2) {
        margin: 0 20px;
      }
    }
  }
  // ----------------------
}
</style>